<template>
  <el-autocomplete
    ref="ref-el-autocomplete"
    v-bind="props"
    v-on="events"
  >
    <el-component-package
      v-for="(item, index) in slots"
      :key="buildDOMKey(item.CM, index)"
      :slot="item.slot"
      :c-m="item.CM"
    />
    <template
      v-if="template && template.length"
      slot-scope="{item}"
    >
      <component
        :is="fragment.tag"
        v-for="(fragment, index) in template"
        :key="'fragment_' + index"
        :style="fragment.style"
      >
        {{ fragmentTitle(fragment.prop, item) }}
      </component>
    </template>
  </el-autocomplete>
</template>

<script lang="ts">
/*
prop 列表
  CM: ComponentModel  组件模型
CM.meta 扩展
  slots: { slot: 'prefix | suffix | prepend | append', CM: ComponentModel }[] 插槽集 [参考 Autocomplete Slots]
  template: { tag: string, prop: string, style: string }[]                    自定义输入建议 [参考 Autocomplete Scoped Slot]
ref 列表
  ref-el-autocomplete [默认]
*/
import { Component, Prop } from 'vue-property-decorator'
import TgComponent from '../TgComponent'
import { ComponentModel } from '@TG/interface'
import { isEmpty } from '@TG/kit/validate'
import ElComponentPackage from './ElComponentPackage.vue'

@Component({
  name: 'ElAutocompletePackage',
  components: {
    ElComponentPackage
  }
})
export default class extends TgComponent {
  @Prop({ type: Object, required: true }) private CM!: ComponentModel

  get props() {
    return Object.assign({}, this.CM.props, this.$attrs)
  }

  get events() {
    return Object.assign({}, this.CM.events, this.$listeners)
  }

  get slots(): { slot: 'prefix | suffix | prepend | append', CM: ComponentModel }[] {
    return this.CM.meta?.slots || []
  }

  get template(): { tag: string, prop: string, style: string }[] {
    return this.CM.meta?.template || []
  }

  private fragmentTitle(prop: string, item: any) {
    let title = item[prop]
    if (isEmpty(title)) {
      title = prop
    }
    return title
  }

  public defaultRef() {
    return 'el-autocomplete'
  }
}
</script>
